<template name="work">
	<view>

		<!-- 用户信息 -->
		<view class="user">
			<view class="right text-center">
				<view class="username">一流的技术，贴心的服务</view>
			</view>
		</view>
		<!-- 工具栏 -->
		<view class="toolbar " style="margin-top: -40px;">
			<view class="list">
				<view class="box" @tap="toPage('../work/workorder?pid=0')">
					<view class="text">待维修 </view>
					<view class="text-num">{{wx_status0}}</view>
				</view>
				<!-- <view class="box" @tap="toPage('../work/workorder?pid=1')">
					<view class="text">进行中 </view>
					<view class="text-num">{{wx_status1}}</view>
				</view> -->
				<view class="box" @tap="toPage('../work/workorder?pid=1')">
					<view class="text">已维修 </view>
					<view class="text-num">{{wx_status2}}</view>
				</view>
				<view class="box" @tap="toPage('../work/upload?pid=0')">
					<view class="text">待上传 </view>
					<view class="text-num">{{wx_status3}}</view>
				</view>
			</view>
		</view>
		<view class="place-1"></view>
		<!-- 占位 -->
		<view class="cu-bar bg-white solid-bottom ">
			<view class="action">
				<text class="cuIcon-title text-orange "></text> 常用功能
			</view>
		</view>
		<view class="cylist flex flex-childsub bg-white ">
			<view class="padding-sm">
				<view class=" bg-menu padding radius text-center shadow-blur">
					<navigator class="content flex-childsub" hover-class="none" url="../work/workorder?pid=0" open-type="navigate">
						<text class="text-lg cuIcon-search ">&emsp;&emsp;工单查询</text>
					</navigator>
				</view>
			</view>
			<!-- <view class="padding-sm">
				<view class=" bg-menu padding radius text-center shadow-blur">
					<navigator class="content flex-childsub" hover-class="none" url="../work/workorder" open-type="navigate">
						<text class="text-lg cuIcon-edit ">&emsp;&emsp;工单编辑</text>
					</navigator>
				</view>
			</view> -->
			<view class="padding-sm">
				<view class="bg-menu padding radius text-center shadow-blur">
					<navigator class="content flex-childsub" hover-class="none" url="../work/upload?pid=0" open-type="navigate">
						<text class="text-lg cuIcon-upload ">&emsp;&emsp;工单上传</text>
					</navigator>
				</view>
			</view>
			<view class="padding-sm">
				<view class="bg-menu padding radius text-center shadow-blur">
					<navigator class="content flex-childsub" hover-class="none" url="../work/usermanage" open-type="navigate">
						<text class="text-lg cuIcon-group_fill ">&emsp;&emsp;用户管理</text>
					</navigator>
				</view>
			</view>

		</view>

		<!-- 最近查询 -->
		<view class="cu-bar bg-white solid-bottom ">
			<view class="action">
				<text class="cuIcon-title text-orange "></text> 最新报修-快速查询
			</view>
		</view>
		<view class="cu-list menu-avatar">
			<view class="cu-item" v-for="(item,i) in workorderlist" :key="i" @tap="toPage('../work/orderedit?id='+item.id+'&type=index')">
				<view class="content" style="left: 15px;">
					<!-- <view class="text-grey">[户主-{{item.name}}]&emsp;{{item.addr}}</view>
					<view class="text-gray text-sm">
						<text class="cuIcon-infofill text-red  margin-right-xs"></text> 
						故障描述:&emsp;{{item.content}} 
						 
						</view>
						-->
						<template>
							<view>
								<view class="text-grey">[户主-{{item.name}}]&emsp;{{item.addr}}</view>
							</view>
							<view>
								<icon class="cuIcon-infofill text-red "></icon>【故障描述】{{item.content.substr(0, 20)}}
								<text v-if="item.content !== null && item.content.length > 20">
									...
								</text>
								<text v-if="item.content !== null && item.content.length > 20" class="full_text line-pink text-bold"
								 @click="toggleDescription(item.content)">查看全文</text>
						
							</view>
						</template>
				</view>
				<view class="action" style="width: 20%;">
					<view class="text-grey text-sm">{{item.cdate}}</view>
					<!-- 					<view class="cu-tag round bg-grey sm">5</view> -->
				</view>
			</view>
			<view :style="[{height:CustomBar+ 'px'}]"></view>
		</view>
	</view>
</template>
<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		name: "work",
		data() {
			return {
				isDoRefresh: false,
				CustomBar: this.CustomBar,
				isfirst: true,
				headerPosition: "fixed",
				headerTop: null,
				statusTop: null,
				showHeader: true,
				//个人信息,
				user: {
					username: '',
					face: '/static/img/user1.jpg',
					signature: '点击昵称跳转-登录/注册页',
					integral: 0,
					balance: 0,
					envelope: 0
				},
				workorderlist: [],
				wx_status0: 0, //待维修
				wx_status1: 0, //进行中
				wx_status2: 0, //已维修
				wx_status3: 0, //待上传
			}
		},
		onPageScroll(e) {
			//兼容iOS端下拉时顶部漂移
			this.headerPosition = e.scrollTop >= 0 ? "fixed" : "absolute";
			this.headerTop = e.scrollTop >= 0 ? null : 0;
			this.statusTop = e.scrollTop >= 0 ? null : -this.statusHeight + 'px';
		},
		onLoad() {
			this.statusHeight = 0;
			// #ifdef APP-PLUS
			this.showHeader = false;
			this.statusHeight = plus.navigator.getStatusbarHeight();
			// #endif
			this.headerTop = 50;
			this.statusTop = 50;
			 console.log("先执行 onload");
			 uni.getStorage({
			 	key: 'userInfo',
			 	success: (res) => { 
			 		this.user.username = res.data.name; 
			 	},
			 	fail: (e) => {
			 		//this.toLogin(); 
			 	}
			 }); 
		},
		onReady() {
			console.log("先执行 onready"); 
			this.getworkorderlist();
		},
		onShow: function(e) {
			console.log("先执行 onshow"); 
			this.getworkorderlist();
		},
		onPullDownRefresh:function(){
		   this.getworkorderlist();
			setTimeout(function () {
				uni.stopPullDownRefresh();  //停止下拉刷新动画
			}, 1000);
		 },
		computed: mapState(['hasLogin', 'userInfo']),
		methods: {
			// 全文展开收起
			toggleDescription(num) {
				//this.showText = !this.showText;
				uni.showModal({
					content: num
				})
			}, 
			//消息列表
			tosearch() {
				uni.navigateTo({
					url: '../workorder/workorder'
				})
			},
			toupload(index) {
				uni.setStorageSync('tbIndex', index);
				uni.navigateTo({
					url: '../workorder/upload'
				})
			},
			tomanage() {
				uni.navigateTo({
					url: '../workorder/usermanager'
				})
			},
			toLogin() {
				uni.navigateTo({
					url: '../login/login'
				})
				this.isfirst = false;
			},
			isLogin() {
				//实际应用中,用户登录状态应该用token等方法去维持登录状态.
				const value = uni.getStorageSync('UserInfo');
				if (value) {
					return true;
				}
				return false;
			},
			toPage(url) {
				if (!url) {
					uni.showToast({
						title: '模板未包含此页面',
						icon: "none"
					});
					return;
				}
				uni.navigateTo({
					url: url
				})
			},
			//查询最新的工单
			getworkorderlist() {
 
				
				
				var _self = this;
				var sqlwhere =   " and wx_people='"+_self.user.username+"'";
				
				console.log("当前用户+"+sqlwhere);
				//查询list
				plus.sqlite.selectSql({
					name: 'test',
					sql: 'select * from c_wordorder where state<>2 '+sqlwhere+' order by cdate asc',
					success: function(data) {
						_self.workorderlist = data;
						console.log('执行查询工单' + _self.workorderlist.length);
					},
					fail: function(e) {
						console.log('selectSql failed: ' + JSON.stringify(e));
					}
				});
				//查询待维修 数量  进行中数量  已维修数量
				plus.sqlite.selectSql({
					name: 'test',
					sql: 'select count(*) num from c_wordorder where state=0'  +sqlwhere ,
					success: function(data) {
						_self.wx_status0 = data[0].num;
						console.log("待维修数量" + data[0].num);
					},
					fail: function(e) {
						console.log('待维修数量查询 failed: ' + JSON.stringify(e));
					}
				});
				plus.sqlite.selectSql({
					name: 'test',
					sql: 'select count(*) num from c_wordorder where state=1' +sqlwhere,
					success: function(data) {
						_self.wx_status1 = data[0].num;
					},
					fail: function(e) {
						console.log('进行中数量查询 failed: ' + JSON.stringify(e));
					}
				});

				plus.sqlite.selectSql({
					name: 'test',
					sql: 'select count(*) num from c_wordorder where state=2' +sqlwhere,
					success: function(data) {
						_self.wx_status2 = data[0].num;
					},
					fail: function(e) {
						console.log('已维修数量查询 failed: ' + JSON.stringify(e));
					}
				});

				plus.sqlite.selectSql({
					name: 'test',
					sql: 'select count(*) num from c_wordorder_record where state=2'  +sqlwhere,
					success: function(data) {
						_self.wx_status3 = data[0].num;
					},
					fail: function(e) {
						console.log('待上传数量查询 failed: ' + JSON.stringify(e));
					}
				});
			}
		}
	}
</script>
<style lang="scss">
	.page {
		width: 100vw;
	} 
	page {
		position: absolute;
		background-color: #fff;
	}

	.cylist {

		justify-content: center;
	}

	.flex-childsub {
		display: flex-grow;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.place {
		background-color: #fff;
		height: 50upx;
		/*  #ifdef  APP-PLUS  */
		margin-top: var(--status-bar-height);
		/*  #endif  */
	}

	.place-1 {
		height: 20upx;
	}

	.place-bottom {
		height: 300upx;
	}

	.bg-menu {
		background-color: #0081ff;
		color: #FFFFFF;
	}

	.user {
		width: 100%;
		height: 400upx;
		display: flex;
		align-items: center;
		// position: relative;
		background-image: linear-gradient(45deg, #0081ff, #0081ff);
		border-radius: 0 0 10% 10%;
		padding-bottom: 120upx;
		padding-top: 80upx;

		.right {
			width: 100%;

			.username {
				font-size: 36upx;
				color: #fff;
			}

			.signature {
				color: #eee;
				font-size: 28upx;
			}
		}


	}

	.toolbar {
		width: 92%;
		margin: 0 8% 0 4%;
		padding: 0 0 20upx 0;
		background-color: #fff;
		box-shadow: 0upx 0upx 25upx rgba(0, 0, 0, 0.1);
		border-radius: 15upx;

		.title {
			padding-top: 10upx;
			margin: 0 0 10upx 3%;
			font-size: 30upx;
			height: 80upx;
			display: flex;
			align-items: center;
		}

		.list {
			display: flex;
			flex-wrap: wrap;

			.box {
				width: 33%;
				margin-bottom: 30upx;
				margin-top: 30upx;

				.text {
					width: 100%;
					display: flex;
					justify-content: center;
					font-size: 26upx;
					color: #3d3d3d;
					padding-bottom: 10upx;
				}


				.text-num {
					width: 100%;
					display: flex;
					justify-content: center;
					font-size: 48upx;
					color: #FF0000;
				}
			}
		}
	}
</style>
